<template>

  <!--  卡片区域  -->
  <n-card>
    <!--    工具栏    -->
    <n-space justify="end" style="padding-bottom: 15px;">
      <!--刷新-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button text style="font-size: 20px; width:22px; height:32px;" @click="refresh">
            <n-icon>
              <refresh-sharp />
            </n-icon>
          </n-button>
        </template>
        <span>刷新</span>
      </n-tooltip>
      <!--密度-->
      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button text style="font-size: 20px; width:22px; height:32px; margin-left: 11px">
              <n-icon>
                <auto-fit-height20-regular />
              </n-icon>
            </n-button>
          </template>
          <span>密度</span>
        </n-tooltip>
      </n-popselect>
      <!--列设置-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-popover trigger="click" placement="bottom-end">
            <template #trigger>
              <n-button text style="font-size: 20px; width:22px; height:32px; margin-bottom: 2px; margin-left: 11px">
                <n-icon>
                  <Settings20Regular />
                </n-icon>
              </n-button>
            </template>
            <template #header>
              <n-checkbox label="列展示" v-model:checked="allChecked" @update:checked="allChange" />
            </template>
            <n-space vertical>
              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />
            </n-space>
          </n-popover>
        </template>
        <span>列设置</span>
      </n-tooltip>
    </n-space>
    <!--    数据表格    -->
    <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
        :size="densityValue"
        :loading="loading"
        :scroll-x="1000"
    />
  </n-card>
  <!--  打开的拟态框  -->
  <n-modal
      v-model:show="showModal"
      preset="card"
      :style="bodyStyle"
      title="新建求职者"
      :segmented="segmented"
  >
    <!--表单-->
    <n-form
        :rules="rules"
        :model="formValue"
        :validate-messages="messages"
    >
      <n-form-item path="user.name" label="用户名">
        <n-input
            clearable
            v-model:value="formValue.user.name"
            placeholder="请输入用户名"
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.password" label="密码">
        <n-input
            show-password-on="click"
            placeholder="请输入密码"
            v-model:value="formValue.user.password"
            type="password"
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.mobile" label="联系电话">
        <n-input
            clearable
            v-model:value="formValue.user.mobile"
            placeholder="请输入联系电话"
        >
        </n-input>
      </n-form-item>
      <n-form-item label="账号状态">
        <n-select
            v-model:value="selectValue"
            :options="selectOptions"
            placeholder="请选择账号状态"
            clearable
        />
      </n-form-item>
      <n-form-item label="账号头像">
        <n-upload list-type="image-card">
          <n-space vertical>
            <n-icon size="18">
              <add/>
            </n-icon>
            上传图片
          </n-space>
        </n-upload>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancel">取消</n-button>
        <n-button type="info" @click="sure">确定</n-button>
      </n-space>
    </template>
  </n-modal>

</template>

<script>
import {defineComponent, h, ref,reactive,onMounted} from 'vue'
import {NButton, NForm, NFormItem, NInput, NTag, NFlex, NIcon} from "naive-ui";
import { Add } from "@vicons/ionicons5"
import { RefreshSharp } from "@vicons/material"
import { AutoFitHeight20Regular ,Settings20Regular} from "@vicons/fluent"
import { LeftOutlined , RightOutlined} from "@vicons/antd"
import { getList} from  "@/api/resume"
export default defineComponent({
  components: {
    Add,
    RefreshSharp,
    AutoFitHeight20Regular,
    Settings20Regular,
    LeftOutlined,
    RightOutlined
  },
  setup(){
    const message = window.$message



    /*  数据表格  */
    // 创建表格列模版
    const createColumns = ({ play }) => {
      return [
        {
          title: "序号",
          key: "index",
          render(row, index) {
            return index + 1;
          }
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "性别",
          key: "gender"
        },
        {
          title: "出生日期",
          key: "birthday"
        },
        {
          title: "学历",
          key: "education"
        },
        {
          title: "工作经验",
          key: "experience"
        },
        {
          title: "期望薪资",
          key: "salary",
        },
        {
          title: "求职状态",
          key: "jobStatus"
        },
        {
          title:"个人优势",
          key:"skill"
        },
        {
          title: "编辑时间",
          key:"createdAt"
        },

      ];
    };
    const columns = createColumns( {play(row) {message.info(`Play ${row.title}`)} })
    // 表格数据
    let data = reactive([])
    let getDate = (time)=> {
      const dateTime = new Date(time)
      const year = dateTime.getFullYear()
      let month = (dateTime.getMonth() + 1)
      month =  month >= 10 ? month: `0${month}`
      let date = dateTime.getDate()
      date = date >= 10? date : `0${date}`
      let hour = dateTime.getHours()
      hour = hour >= 10? hour : `0${hour}`
      let minute = dateTime.getMinutes()
      minute = minute >= 10? minute : `0${minute}`
      let second = dateTime.getSeconds()
      second = second >= 10? second : `0${second}`
      return `${year}-${month}-${date} ${hour}:${minute}:${second}`
    }
    //获取用户列表数据
    let getData=()=>{
       getList().then(res=>{
         const content =res.data.list
         content.forEach((item, index) => {
              data.push({
                key: index,
                name:item.name,
                gender:item.gender?item.gender:'-',
                birthday:item.birthday?item.birthday:'-' ,
                education:item.education ,
                experience:item.experience?item.experience:'-',
                salary:item.salary?item.salary:'-',
                jobStatus:item.jobStatus?item.jobStatus:'-',
                skill:item.skill?item.skill:'-',
                createdAt:getDate(item.createdAt)
           })
         })
         total.value = data.length
      })
    }

    // 总条数
    const total = ref(data.length);
    // 总页数a
    const page = ref(Math.ceil(data.length / 10));
    // 当前所在页数
    const currentPage = ref(1);
    // 分页
    const pagination = {
      prev:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                currentPage.value --
              }
            },
            {
              default: () => h(LeftOutlined)
            }
        )
      },
      next:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                currentPage.value ++
              }
            },
            {
              default: () => h(RightOutlined)
            }
        )
      },
      prefix:()=>{
        const range = [currentPage.value * 10 - 9, currentPage.value * 10];
        if (currentPage.value <= 1) {
          return `第 1-${range[1]} 条 / 总共 ${total.value} 条`;
        }else if (currentPage.value >= page.value) {
          return `第 ${range[0]} 条到第 ${total.value} 条 / 总共 ${total.value} 条`;
        }else if (currentPage.value > 1 && currentPage.value < page.value) {
          return `第 ${range[0]} 条到第 ${range[1]} 条 / 总共 ${total.value} 条`;
        }
      },
    }


    /*  工具栏  */
    /*新建*/
    // 显示模态框
    const showModal = ref(false)
    // 模态框样式
    const bodyStyle = {
      width: "640px"
    }
    const segmented = {
      content: "soft",
      footer: "soft"
    }
    // 取消模态框
    function cancel() {
      showModal.value = false
    }
    // 确定提交
    function sure() {

    }
    // 表单信息
    const formValue = ref({
      user: {
        name: "",
        mobile: "",
        password: '',
      }
    })
    const selectValue = ref("1")
    const selectOptions = ref([
      {label: "启用", value: "1"},
      {label: "禁用", value: "2"},
    ])
    // 验证规则
    const rules = {
      user: {
        name: {
          required: true,
          trigger: "blur",
        },
        mobile: {
          required: true,
          trigger: "blur",
        },
        password: {
          required: true,
          trigger: "blur",
        },
      }
    };
    // 表单必填提示
    const messages = {
      required: "这是必填项！"
    }

    /*刷新*/
    // 加载
    const loading = ref(false)
    // 刷新
    function refresh() {
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }

    /*密度*/
    // 密度事件数据
    const densityOptions = [
      {
        label: "默认",
        value: "large"
      },
      {
        label: "中等",
        value: "medium"
      },
      {
        label: "紧密",
        value: "small",
      },
    ]
    const densityValue = ref('medium')

    /*列设置*/
    // 复选框全选
    const allChecked = ref(true)
    // 复选框列表
    const checkboxList = ref([])
    // 列表添加数据
    for (let i = 0;i < columns.length; i++){
      checkboxList.value.push({name: columns[i].title, checked: true})
    }
    // 全选改变事件
    const allChange = ()=>{
      if (allChecked.value) {
        checkboxList.value.forEach(item => {item.checked = true})
      } else {
        checkboxList.value.forEach(item => {item.checked = false})

      }
    }
    // 复选框单个改变事件
    const itemChange = ()=>{
      if (checkboxList.value.every(item => item.checked)) {
        allChecked.value = true
      } else {
        allChecked.value = false

      }
    }

   onMounted(()=>{
     getData()
   })


    return {
      showModal,
      bodyStyle,
      segmented,
      cancel,
      sure,
      formValue,
      rules,
      messages,
      selectValue,
      selectOptions,
      densityOptions,
      densityValue,
      data,
      columns,
      pagination,
      loading,
      refresh,
      page,
      checkboxList,
      allChecked,
      allChange,
      itemChange,
      getDate
    }
  }

})
</script>

<style scoped>

</style>